<template>
  <div class="real-time">
    <div class="subject ">
      <!-- 时间显示 -->
      <div class="time">{{ timestamp | mmsgFormat }}</div>
      <!-- 三合一送料机 -->
      <div :class="Feeder_State.class">
        <div v-show="Feeder_State.isactive" :class="Feeder_State.isactive ? 'warn-bg':'normal-bg'" class="feed-hint">
          <div class="hint">{{ Feeder_State.hint.error }}</div>
          <div class="hint">{{ Feeder_State.hint.maintain }}</div>
          <div class="hint">{{ Feeder_State.hint.instruct }}</div>
        </div>
        <img class=" img-scale" :src="Feeder_State.img" alt="" />
      </div>
      <!-- ----------------------------三合一送料机end----------------------------------- -->
      <!-- 冲床 -->
      <div
        v-for="punch in Punch_State"
        :key="punch.id"
        :class="punch.class"
        class="machine"
      >
        <div v-show="punch.isactive"  :class="Punch_State.isactive ? 'warn-bg':'normal-bg'" class="punch-hint">
          <div class="hint">{{ punch.hint.error }}</div>
          <div class="hint">{{ punch.hint.maintain }}</div>
          <div class="hint">{{ punch.hint.instruct }}</div>
        </div>
        <img class=" img-scale" :src="punch.img" alt="" />
      </div>
      <!-- -------------------------------冲床end------------------------ -->
      <!-- 机器手 -->
      <div
        v-for="robot in Robot_State"
        :key="robot.id"
        class="robot"
        :class="robot.class"
      >
        <div v-show="robot.isactive" :class="robot.isactive ? 'warn-bg':'normal-bg'"  class="robot-hint">
          <div class="hint">{{ robot.hint.error }}</div>
          <div class="hint">{{ robot.hint.maintain }}</div>
          <div class="hint">{{ robot.hint.instruct }}</div>
        </div>
        <img class="img-scale" :src="robot.img" alt="" />
      </div>
      <!-- ----------------------机器手end----------------- -->
      <!-- 换具小车 -->
      <div
        v-for="lnmost in Fixture_State"
        :key="lnmost.id"
        class="lnmost"
        :class="lnmost.class"
      >
        <div v-show="lnmost.isactive" :class="lnmost.isactive ? 'normal-bg': 'warn-bg'" class="lnmost-hint">
          <div class="hint">{{ lnmost.hint.error }}</div>
          <div class="hint">{{ lnmost.hint.maintain }}</div>
          <div class="hint">{{ lnmost.hint.instruct }}</div>
        </div>
        <img class="img-scale" :src="lnmost.img" alt="" />
      </div>
      <!-- -------------------------换具小车end--------------------------------- -->
      <!-- 控制系统 -->
      <div
        v-for="control in apparatus.control"
        :key="control.id"
        :class="control.class"
      >
        <div v-show="control.isactive" class="fault-display">
          <div>{{ control.hint.error }}</div>
          <div>{{ control.hint.maintain }}</div>
          <div>{{ control.hint.instruct }}</div>
        </div>
        <img class="img-scale" :src="control.img" alt="" />
      </div>
      <!-- -----------------------------控制系统end----------------------- -->
      <!-- 中转带 -->
      <div
        v-for="conveyor in Conveyor_State"
        :key="conveyor.id"
        :class="conveyor.class"
      >
        <div v-show="conveyor.isactive" class="fault-display">
          <div>{{ conveyor.hint.error }}</div>
          <div>{{ conveyor.hint.maintain }}</div>
          <div>{{ conveyor.hint.instruct }}</div>
        </div>
        <img class="img-scale" :src="conveyor.img" alt="" />
      </div>
      <!-- -----------------------中转带end------------------------------- -->
      <!-- 完成--------直线c传输带 -->
      <div
        v-for="direct in DieChange_State"
        :key="direct.id"
        class="direct"
        :class="direct.class"
      >
        <div v-show="direct.isactive"  :class="direct.isactive ? 'normal-bg': 'warn-bg'"  class="direct-hint">
          <div class="hint">{{ direct.hint.error }}</div>
          <div class="hint">{{ direct.hint.change1 }}</div>
          <div class="hint">{{ direct.hint.change2 }}</div>
          <div class="hint">{{ direct.hint.change3 }}</div>
          <div class="hint">{{ direct.hint.change4 }}</div>
          <div class="hint">{{ direct.hint.change5 }}</div>
        </div>
        <img class="img-scale" :src="direct.img" alt="" />
      </div>
      <!-- ----------------------------直线传输带end----------------------------------- -->
      <!-- 成品传送带 -->
      <div class="product">
        <img class="img-scale" src="../../assets/images/conveyor.png" alt="" />
      </div>

      <div class=" state-bnt">
        <el-button
          @click="Feeder_bnt"
          :type="Feeder_State.isactive ? 'info' : 'primary'"
          size="mini"
          round
        >
          {{
            Feeder_State.isactive ? "隐藏送料机状态" : "显示送料机状态"
          }}</el-button
        >
        <el-button
          @click="DieChange_bnt"
          :type="DieChange_State[0].isactive ? 'info' : 'primary'"
          size="mini"
          round
        >
          {{DieChange_State[0].isactive ? '隐藏换模车状态' : '显示换模车状态'}}
        </el-button>
        <el-button
          @click="Fixture_bnt"
          :type="bntState.fixture ? 'info' : 'primary'"
          size="mini"
          round
        >
          {{
            bntState.fixture ? "隐藏全部换夹小车状态" : "显示全部换夹小车状态"
          }}
        </el-button>
        <el-button
          @click="Punch_bnt"
          :type="bntState.punch ? 'info' : 'primary'"
          size="mini"
          round
        >
          {{ bntState.punch ? "隐藏全部显示冲床状态" : "显示全部显示冲床状态" }}
        </el-button>
        <el-button
          @click="Robot_bnt"
          :type="bntState.robot ? 'info' : 'primary'"
          size="mini"
          round
        >
          {{ bntState.robot ? "隐藏全部机器人状态" : "显示全部机器人状态" }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
// 引入vueX数据管理中心
import { createNamespacedHelpers } from "vuex";
const { mapMutations, mapState } = createNamespacedHelpers("menuModule");
export default {
  data() {
    return {
      client: null,
      // 当前时间
      timestamp: 0,
      //   中间监控
      apparatus: {
        // 控制台
        control: [
          {
            id: 601,
            name: "1号控制系统",
            img: require("../../assets/images/control.png"),
            class: "control control-01",
            hint: {
              error: "传输带中转区",
              maintain: "目前正常运行",
              instruct: "运行指令：003",
            },
            isactive: false,
          },
          {
            id: 602,
            name: "1号控制系统",
            img: require("../../assets/images/control.png"),
            class: "control control-02",
            hint: {
              error: "传输带中转区",
              maintain: "目前正常运行",
              instruct: "运行指令：003",
            },
            isactive: false,
          },
          {
            id: 603,
            name: "1号控制系统",
            img: require("../../assets/images/control.png"),
            class: "control control-03",
            hint: {
              error: "传输带中转区",
              maintain: "目前正常运行",
              instruct: "运行指令：003",
            },
            isactive: false,
          },
          {
            id: 604,
            name: "1号控制系统",
            img: require("../../assets/images/control.png"),
            class: "control control-04",
            hint: {
              error: "传输带中转区",
              maintain: "目前正常运行",
              instruct: "运行指令：003",
            },
            isactive: false,
          },
          {
            id: 605,
            name: "1号控制系统",
            img: require("../../assets/images/control.png"),
            class: "control control-05",
            hint: {
              error: "传输带中转区",
              maintain: "目前正常运行",
              instruct: "运行指令：003",
            },
            isactive: false,
          },
        ],
      },
      bntState: {
        punch: false,
        fixture: false,
        robot: false,
      },
    };
  },
  // 计算属性
  computed: {
    ...mapState([
      "Conveyor_State",
      "Feeder_State",
      "DieChange_State",
      "Fixture_State",
      "Punch_State",
      "Robot_State",
    ]),
  },
  created() {},
  methods: {
    ...mapMutations([
      "bntFeederFunction",
      "bntPunch",
      "bntDieChange",
      "bntFixture",
      "bntRobot",
    ]),
    Feeder_bnt() {
      this.bntFeederFunction({ valu: this.Feeder_State.isactive });
    },
    DieChange_bnt() {
      this.bntDieChange({ valu: this.DieChange_State[0].isactive });
    },

    Fixture_bnt() {
      if (this.bntState.fixture == false) {
        this.bntState.fixture = true;
      } else {
        this.bntState.fixture = false;
      }
      this.bntFixture({ valu: this.bntState.fixture });
    },
    Punch_bnt() {
      if (this.bntState.punch == false) {
        this.bntState.punch = true;
      } else {
        this.bntState.punch = false;
      }
      this.bntPunch({ valu: this.bntState.punch });
    },
    Robot_bnt() {
      if (this.bntState.robot == false) {
        this.bntState.robot = true;
      } else {
        this.bntState.robot = false;
      }
      console.log(this.bntState.robot);
      this.bntRobot({ valu: this.bntState.robot });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/realTime.less";
</style>
